<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div>
						<!-- <div class="searchArea">
							<el-input v-model="query.keywords" placeholder="关键字搜索"/>
							<el-button type="primary" @click="loadData()">搜索</el-button>
						</div> -->
						<div class="searchArea">
							<el-row :gutter="15">
							<el-col :span="4">
								<el-select v-model="query.orderStatus" clearable placeholder="订单状态">
									<el-option
										v-for="order in orderStatusAll"
										:key="order.id"
										:value="order.id"
										:label="order.name">
									</el-option>
								</el-select>
							</el-col>

							 <el-col :span="3">
								<el-select v-model="query.venderId" clearable placeholder="商户">
									<el-option
									v-for="v in venders"
									:key="v.id"
									:value="v.id"
									:label="v.name">
									</el-option>
								</el-select>
							</el-col>

							<el-col :span="8">
								<el-date-picker
									v-model="createTime"
									type="daterange" value-format="yyyy-MM-dd"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-col>

							<el-col :span="2">
								<el-button type="primary" @click="loadData()">确定</el-button>
							</el-col>
							</el-row>
						</div>

						<div>
							<el-table
								:data="orderData"
								style="width: 100%">
								<el-table-column
								prop="id"
								label="订单编号"
								width="180">
								</el-table-column>
								<el-table-column
								prop="businessId"
								label="商品编号"
								width="180">
								</el-table-column>
								<el-table-column
								prop="createTime"
								label="创建时间">
									<template slot-scope="scope">
										{{dateFormat(scope.row.createTime)}}
									</template>
								</el-table-column>
								<el-table-column
								prop="userName"
								label="买家">
								</el-table-column>
								<el-table-column
								prop="venderName"
								label="商户名称">
								</el-table-column>
								<el-table-column
								prop="orderStatusName"
								label="订单状态">
								</el-table-column>
								<el-table-column
								prop="handler"
								label="操作">
								    <template slot-scope="scope">
										<el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>


						<div class="block paginationStyle">
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="query.pageNo"
							:page-sizes="[20, 40,100]"
							:page-size="query.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="query.totalSize">
							</el-pagination>
						</div>

					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../../Navigation'
	import BreadCrumb from '../../BreadCrumb'
	export default{
		name:'OrderWareFleaList',
		methods: {

			dateFormat(time) {
				if(time==null){
					return null;
				}
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				* */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
			},
			handleSizeChange(val){
				this.query.pageSize = val;
				this.loadData();
			},
			handleCurrentChange(val){
				this.query.pageNo = val;
				this.loadData();
			},
			viewOrder(row){
				this.$router.push('/order/wareflea/'+row.id);
			},
			loadData(){
				var that = this;
				this.$api.post('/order/page',that.query,function(data){
					if(data.flag=="success"){
						that.query.totalSize = data.data.total;
						that.orderData = data.data.records;
						for(var i=0;i<that.orderData.length;i++){
							that.orderData[i].orderStatusName = that.getStatusNameById(that.orderData[i].orderStatus);
						}
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			getStatusNameById(id){
				for(var i=0;i<this.orderStatusAll.length;i++){
					if(this.orderStatusAll[i].id==id){
						return this.orderStatusAll[i].name;
					}
				}
				return null;
			}
		},
		watch:{
			createTime(curVal,oldVal){
				if(curVal==null){
					this.query.createTimeBegin = "";
					this.query.createTimeEnd = "";
				} else{
					this.query.createTimeBegin = curVal[0];
					this.query.createTimeEnd = curVal[1];
				}
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/vender/getAll',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.venders.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});
			this.loadData();
		},
		data:function(){
			return {
				createTime:[],
				query:{
					orderStatus:"",
					orderType:4,
					venderId:"",
					createTimeBegin:"",
					createTimeEnd:"",
					pageNo:1,
					pageSize:40,
					totalSize:0
				},
				navs:["订单管理","二手交易订单","订单列表"],
				orderStatusAll:this.GLOBAL.orderStatusAll,
				venders:[],
				orderData:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>

	.searchArea{
		margin-bottom: 15px;
	}

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-input{
	width: 220px !important;
  }
  .paginationStyle{
	  margin-top: 15px;
	  float:right;
  }
</style>
